<template>
    <div class="loan-nsm">
        <div class="rowone">
            <el-row type="flex" class="row-bg" :gutter="24">
                <el-col :span="5">
                    <el-input
                            placeholder="投资人姓名"
                            suffix-icon="el-icon-search"
                            v-model="requirement.name"
                            class="inputLeft"
                    >
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-input
                            placeholder="投资人手机"
                            suffix-icon="el-icon-search"
                            v-model="requirement.userName"
                            class="inputLeft"
                    >
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-input
                            placeholder="红包名称"
                            suffix-icon="el-icon-search"
                            v-model="requirement.userPhone"
                            class="inputLeft"
                    >
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-select
                            v-model="requirement.status"
                            clearable
                            placeholder="全部来源"
                            style="width: 100%"
                    >
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-search" @click="onClickSearch"
                    >搜索</el-button
                    >
                </el-col>
            </el-row>
        </div>
        <TableComponent
                :cols="cols"
                :table-data="tableData"
                :total="total"
                @requestData="requestData"
        >
            <template slot="operating" slot-scope="scope">
                <el-popover placement="top" trigger="hover">
                    <el-button size="medium" @click="onClickEdit(scope)" type="primary"
                    >编辑</el-button
                    >
                    <el-button size="medium" @click="onClickDestroy(scope)" type="danger"
                    >作废</el-button
                    >
                    <span class="more" slot="reference">...</span>
                </el-popover>
            </template>
        </TableComponent>
    </div>

</template>

<script>

    import TableComponent from "../../components/basic/TableComponent"

    import { getPendingShelfLoanFrom } from "../../http/yuying";

    export default {
        name: "Loan",
        components: {
            TableComponent
        },
        data() {
            return {
                cols: {
                    id: "红包名称",
                    name: "姓名",
                    userPhone: "投资人手机",
                    userName: "用户来源",
                    loanType: "获取方式",
                    gmtModified: "获取时间",
                    loanPeriod: "到期时间（天）",
                    apr: "年化利率(%)",
                    total: "投资金额",
                    status: "状态"
                },
                requirement: {
                    name: "", //红包名称
                    userName: "", //借款方名称
                    userPhone: "", //借款方手机
                    status: "全部状态", //新标状态
                    loanType: "", //借款类型
                },
                tableData: [],
                total: 0,
                page: 1,
                limit: 5,
                options: [
                    {
                        value: "全部状态",
                    },
                    {
                        value: "渠道1",
                    },
                    {
                        value: "渠道2",
                    },
                    {
                        value: "渠道3",
                    },
                ],
            }
        },
        methods: {
            requestData(page, limit,requirement) {
                this.page = page;
                this.limit = limit;
                getPendingShelfLoanFrom(page, limit,requirement).then(res => {
                    if(res.data.code == 20000) {
                        this.total = res.data.data.total;
                        this.tableData = res.data.data.rows;
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch(err => {
                    console.err(err);
                    this.$message.error("数据加载失败！详情见日志");
                })
            },
            onClickSearch() {
                this.requestData(1, 5, this.requirement);
            },
            onClickShelf(scope) {
                console.log(scope.data.data.id);
                this.$router.push(`/loan/loantarget/loanstsm/${scope.data.data.id}`);
            }
        },
        beforeMount() {
            this.requestData(1, 5);
        }
    }

</script>

<style scoped>
    .row-bg {
        padding: 20px 20px;
    }
</style>